<template>
	<div class="tab-bar-container">
		<a-affix ref="affixRef" :offset-top="offsetTop">
			<div class="tab-bar-box">
				<div class="tab-bar-scroll">
					<div class="tags-wrap">
						<tab-item v-for="(tag, index) in tagList" :key="tag.fullPath" :index="index" :item-data="tag" />
					</div>
				</div>
				<div class="tag-bar-operation"></div>
			</div>
		</a-affix>
	</div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onUnmounted } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener';
import { useAppStore, useTabBarStore } from '@/store';
import tabItem from './tab-item.vue';

const appStore = useAppStore();
const tabBarStore = useTabBarStore();

const affixRef = ref();
const tagList = computed(() => {
	return tabBarStore.getTabList;
});
const offsetTop = computed(() => {
	return appStore.navbar ? 60 : 0;
});

watch(
	() => appStore.navbar,
	() => {
		affixRef.value.updatePosition();
	}
);
listenerRouteChange((route: RouteLocationNormalized) => {
	if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
		tabBarStore.updateTabList(route);
	}
}, true);

onUnmounted(() => {
	removeRouteListener();
});
</script>

<style scoped lang="less">
.tab-bar-container {
	position: relative;
	background-color: var(--color-bg-2);

	.tab-bar-box {
		display: flex;
		padding: 0 0 0 20px;
		background-color: var(--color-bg-2);
		border-bottom: 1px solid var(--color-border);

		.tab-bar-scroll {
			flex: 1;
			height: 32px;
			overflow: hidden;

			.tags-wrap {
				height: 48px;
				padding: 4px 0;
				overflow-x: auto;
				white-space: nowrap;

				:deep(.arco-tag) {
					display: inline-flex;
					align-items: center;
					margin-right: 6px;
					cursor: pointer;

					&:first-child {
						.arco-tag-close-btn {
							display: none;
						}
					}
				}
			}
		}
	}

	.tag-bar-operation {
		width: 100px;
		height: 32px;
	}
}
</style>
